<!doctype html>
<html>
<head>
    {include file="index/head" /}
</head>
<body>
{include file="index/header" /}
<div class="main">
    <div id="step"></div>
    <form id="J_install_form" action="{:url('/Index/step_4')}" method="post">
        <input type="hidden" name="force" value="0"/>
        <div class="server">
            <table width="100%">
                <tr>
                    <th colspan="3">数据库信息</th>
                </tr>
                <tr>
                    <td class="t-r" width="150">数据库服务器</td>
                    <td width="300"><input type="text" name="dbhost" id="dbhost" value="127.0.0.1" class="input"></td>
                    <td>
                        <div id="J_install_tip_dbhost"><span class="gray">一般为127.0.0.1或者localhost</span></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">数据库端口</td>
                    <td><input type="text" name="dbport" id="dbport" value="3306" class="input"></td>
                    <td>
                        <div id="J_install_tip_dbport"><span class="gray">一般为3306</span></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">数据库用户名</td>
                    <td><input type="text" name="dbuser" id="dbuser" value="root" class="input"></td>
                    <td>
                        <div id="J_install_tip_dbuser"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">数据库密码</td>
                    <td><input type="text" name="dbpw" id="dbpw" value="" class="input" autoComplete="off"
                               onblur="TestDbPwd()"></td>
                    <td>
                        <div id="J_install_tip_dbpw"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">数据库名</td>
                    <td><input type="text" name="dbname" id="dbname" value="hkcms" class="input"></td>
                    <td>
                        <div id="J_install_tip_dbname"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">数据库表前缀</td>
                    <td><input type="text" name="dbprefix" id="dbprefix" value="hkcms_" class="input"></td>
                    <td>
                        <div id="J_install_tip_dbprefix"><span class="gray"></span></div>
                    </td>
                </tr>
                <tr>
                    <th colspan="3">网站配置</th>
                </tr>
                <tr>
                    <td class="t-r">网站名称</td>
                    <td><input type="text" name="sitename" value="HkCms开源内容管理系统" class="input"></td>
                    <td>
                        <div id="J_install_tip_sitename"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">关键词</td>
                    <td><input type="text" name="sitekeywords" value="HkCms开源内容管理系统" class="input" autoComplete="off">
                    </td>
                    <td>
                        <div id="J_install_tip_sitekeywords"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">描述</td>
                    <td><input type="text" name="siteinfo" class="input" value="HkCms开源内容管理系统,是一款完全开源免费的PHP+MYSQL系统.核心采用了Thinkphp6.0框架等众多开源软件,同时核心功能也作为开源软件发布">
                    </td>
                    <td>
                        <div id="J_install_tip_siteinfo"></div>
                    </td>
                </tr>
                <tr>
                    <th colspan="3">管理员信息</th>
                </tr>
                <tr>
                    <td class="t-r">管理员帐号</td>
                    <td><input type="text" name="manager" value="admin" class="input"></td>
                    <td>
                        <div id="J_install_tip_manager"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">管理员密码</td>
                    <td><input type="text" name="manager_pwd" id="J_manager_pwd" class="input" autoComplete="off" placeholder="请输入6位或6位以上的密码"></td>
                    <td>
                        <div id="J_install_tip_manager_pwd"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">重复密码</td>
                    <td><input type="text" name="manager_ckpwd" class="input" autoComplete="off"></td>
                    <td>
                        <div id="J_install_tip_manager_ckpwd"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">邮箱</td>
                    <td><input type="text" name="manager_email" class="input" value="" placeholder="admin@admin.com"></td>
                    <td>
                        <div id="J_install_tip_manager_email"></div>
                    </td>
                </tr>
                <tr>
                    <td class="t-r">测试数据</td>
                    <td><input class="w-i" name="testdata" type="checkbox" value="1" alt="" title=""/><span class="gray font-12 testdata">默认测试数据，了解HkCms开源内容管理系统！</span>
                    </td>
                    <td>
                        <div></div>
                    </td>
                </tr>
            </table>
            <div id="J_response_tips" style="display:none;"></div>
        </div>
        <div class="center">
            <a href="{:url('/Index/step_2')}" class="a-btn">
                <div class="bottom">上一步</div>
            </a>
            <a href="javascript:void(0)" class="a-btn btn_submit J_install_btn">
                <button type="submit" class="bottom btn_submit J_install_btn">创建数据</button>
            </a>
        </div>
    </form>
</div>
{include file="index/footer" /}
<div style="width:0;height:0;overflow:hidden;"><img src="/static/install/images/pop_loading.gif"></div>
<script src="/static/install/js/validate.js"></script>
<script src="/static/install/js/ajaxForm.js"></script>
<script>
    function TestDbPwd() {
        var dbHost = $('#dbhost').val();
        var dbUser = $('#dbuser').val();
        var dbPwd = $('#dbpw').val();
        var dbName = $('#dbname').val();
        var dbPort = $('#dbport').val();
        data = {'dbHost': dbHost, 'dbUser': dbUser, 'dbPwd': dbPwd, 'dbName': dbName, 'dbPort': dbPort};
        var url = "{:url('/Index/testdbpwd')}";
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            beforeSend: function () {
            },
            success: function (msg) {
                if (msg) {

                } else {
                    $('#dbpw').val("");
                    $('#J_install_tip_dbpw').html('<span for="dbname" generated="true" class="tips_error" style="">数据库链接配置失败</span>');
                }
            },
            complete: function () {
            },
            error: function () {
                $('#J_install_tip_dbpw').html('<span for="dbname" generated="true" class="tips_error" style="">数据库链接配置失败</span>');
                $('#dbpw').val("");
            }
        });
    }

    $(function () {
        var $step = $("#step");
        $step.step({
            index: 2,
            time: 500,
            title: ["使用协议", "检查环境", "配置系统", "安装数据库", "完成安装"]
        });
        $('.testdata').click(function () {
           var entrance = $("input[type=checkbox][name='testdata']:checked");
           if (entrance.length == 0) {
               $("input:checkbox[name='testdata']").prop('checked', true);
           } else {
               $("input:checkbox[name='testdata']").prop('checked', false);
           }
        })
        //聚焦时默认提示
        var focus_tips = {
            dbhost: '数据库服务器地址，一般为127.0.0.1',
            dbport: '数据库服务器端口，一般为3306',
            dbuser: '',
            dbpw: '',
            dbname: '',
            dbprefix: '建议使用默认，同一数据库安装多个时需修改',
            manager: '创始人帐号，拥有站点后台所有管理权限',
            manager_pwd: '',
            manager_ckpwd: '',
            sitename: '',
            siteurl: '请以“/”结尾',
            sitekeywords: '',
            siteinfo: '',
            manager_email: ''
        };

        var install_form = $("#J_install_form"),
            reg_username = $('#J_reg_username'),						//用户名表单
            reg_password = $('#J_reg_password'),						//密码表单
            reg_tip_password = $('#J_reg_tip_password'),		//密码提示区
            response_tips = $('#J_response_tips');				//后端返回提示

        //validate插件修改了remote ajax验证返回的response处理方式；增加密码强度提示 passwordRank
        install_form.validate({
            //debug : true,
            //onsubmit : false,
            errorPlacement: function (error, element) {
                //错误提示容器
                $('#J_install_tip_' + element[0].name).html(error);
            },
            errorElement: 'span',
            //invalidHandler : , 未验证通过 回调
            //ignore : '.ignore' 忽略验证
            //onkeyup : true,
            errorClass: 'tips_error',
            validClass: 'tips_error',
            onkeyup: false,
            focusInvalid: false,
            rules: {
                dbhost: {
                    required: true
                },
                dbport: {
                    required: true
                },
                dbuser: {
                    required: true
                },
                dbpw: {
                    required: true
                },
                dbname: {
                    required: true
                },
                dbprefix: {
                    required: true
                },
                manager: {
                    required: true
                },
                manager_pwd: {
                    required: true,
                    minlength: 6
                },
                manager_ckpwd: {
                    required: true,
                    equalTo: '#J_manager_pwd'
                },
                manager_email: {
                    required: true,
                    email: true
                }
            },
            highlight: false,
            unhighlight: function (element, errorClass, validClass) {
                var tip_elem = $('#J_install_tip_' + element.name);
                tip_elem.html('<span class="' + validClass + '" data-text="text"><span>');

            },
            onfocusin: function (element) {
                var name = element.name;
                $('#J_install_tip_' + name).html('<span data-text="text">' + focus_tips[name] + '</span>');
                $(element).parents('tr').addClass('current');
            },
            onfocusout: function (element) {
                var _this = this;
                $(element).parents('tr').removeClass('current');

                if (element.name === 'email') {
                    //邮箱匹配点击后，延时处理
                    setTimeout(function () {
                        _this.element(element);
                    }, 150);
                } else {

                    _this.element(element);

                }

            },
            messages: {
                dbhost: {
                    required: '数据库服务器地址不能为空'
                },
                dbport: {
                    required: '数据库服务器端口不能为空'
                },
                dbuser: {
                    required: '数据库用户名不能为空'
                },
                dbpw: {
                    required: '数据库密码不能为空'
                },
                dbname: {
                    required: '数据库名不能为空'
                },
                dbprefix: {
                    required: '数据库表前缀不能为空'
                },
                manager: {
                    required: '管理员帐号不能为空'
                },
                manager_pwd: {
                    required: '密码不能为空'
                },
                manager_ckpwd: {
                    required: '重复密码不能为空',
                    equalTo: '两次输入的密码不一致。请重新输入'
                },
                manager_email: {
                    required: 'Email不能为空',
                    email: '请输入正确的电子邮箱地址'
                }
            },
            submitHandler: function (form) {
                form.submit();
                return true;
            }
        });
        var _data = {};
    });
</script>
</body>
</html>